<template>
  <el-card class="box-card card-main" shadow="never">
    <el-row>
      <el-button type="primary" size="mini" @click="add()">添加资源</el-button>
    </el-row>
    <el-table v-loading="listLoading" :data="data" border size="small" stripe row-key="id">
      <el-table-column label="资源名称" width="190">
        <template slot-scope="scope">
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="资源类型" width="80">
        <template slot-scope="scope">
          <span v-if="scope.row.type ===1 ">菜单</span>
          <span v-if="scope.row.type ===2 ">按钮</span>
          <span v-if="scope.row.type ===3 ">嵌套页面</span>
          <span v-if="scope.row.type ===4 ">主菜单</span>
        </template>
      </el-table-column>
      <el-table-column label="路由" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.path }}</span>
        </template>
      </el-table-column>
      <el-table-column label="redirect" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.redirect }}</span>
        </template>
      </el-table-column>
      <el-table-column label="activeMenu" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.activeMenu }}</span>
        </template>
      </el-table-column>
      <el-table-column label="组件" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.component }}</span>
        </template>
      </el-table-column>
      <el-table-column label="权限标识" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.permission }}</span>
        </template>
      </el-table-column>
      <el-table-column label="图标" width="50px">
        <template slot-scope="scope">
          <svg-icon :icon-class="scope.row.icon" />
        </template>
      </el-table-column>
      <el-table-column label="排序" width="55px">
        <template slot-scope="scope">
          <span>{{ scope.row.sort }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="160px">
        <template slot-scope="scope">
          <el-button
            style="padding: 3px 4px 3px 4px;margin: 1px"
            size="mini"
            @click="editRow(scope.row)"
          >编辑</el-button>
          <el-button
            type="primary"
            style="padding: 2px 3px 2px 3px;margin: 1px"
            size="mini"
            @click="add(scope.row)"
          >添加下级</el-button>
          <el-button
            type="danger"
            style="padding: 3px 4px 3px 4px;margin: 1px"
            size="mini"
            @click="deleteRow(scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--新增、 编辑、添加下级 -->
    <el-dialog
      :title="addOrEditForm.title"
      :visible.sync="addOrEditFormVisible"
      width="500px"
      @close="closeDialog('addOrEditForm')"
    >
      <el-form
        ref="addOrEditForm"
        label-width="90px"
        :model="addOrEditForm"
        size="small"
        :rules="rules"
      >
        <el-form-item label="上级名称" prop="parentId">
          <el-select v-model="addOrEditForm.parentId" filterable placeholder="请选择上级名称">
            <el-option label="root" :value="0" />
            <el-option
              v-for="(item, index) in resources"
              :key="index"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="资源名称" prop="name">
          <el-input v-model="addOrEditForm.name" auto-complete="off" placeholder="请输入名称" />
        </el-form-item>
        <el-form-item label="资源类型" prop="type">
          <el-select v-model="addOrEditForm.type" placeholder="请输入资源类型">
            <el-option label="菜单" :value="1" />
            <el-option label="按钮" :value="2" />
            <el-option label="嵌套页面" :value="3" />
            <el-option label="主菜单" :value="4" />
          </el-select>
        </el-form-item>
        <el-form-item label="图标" prop="icon">
          <!-- <el-select v-model="addOrEditForm.icon" placeholder="请选择图标">
            <el-option :value="item" v-for="(item, index) in svgIcons" :key="index">
              <svg-icon :icon-class="item"/>
            </el-option>
          </el-select>-->
          <el-popover v-model="visible" placement="bottom-start" trigger="click">
            <div class="menu-icon-list" style=" width:380px; height:220px; overflow:auto">
              <el-button
                v-for="(item, index) in svgIcons"
                :key="index"
                :class="{ 'is-active': item === addOrEditForm.icon, 'is-one': index % 8 === 0 }"
                @click="iconActiveHandle(item)"
              >
                <svg-icon :icon-class="item" />
              </el-button>
            </div>
            <el-input
              slot="reference"
              v-model="addOrEditForm.icon"
              :readonly="true"
              placeholder="菜单图标名称"
            />
          </el-popover>
        </el-form-item>
        <el-form-item label="路由链接" prop="path">
          <el-input v-model="addOrEditForm.path" auto-complete="off" placeholder="请输入路由链接" />
        </el-form-item>
        <el-form-item label="redirect" prop="redirect">
          <el-input v-model="addOrEditForm.redirect" auto-complete="off" placeholder="请输入跳转路由" />
        </el-form-item>
        <el-form-item label="activeMenu" prop="activeMenu">
          <el-input
            v-model="addOrEditForm.activeMenu"
            auto-complete="off"
            placeholder="请输入活动菜单路由链接"
          />
        </el-form-item>
        <el-form-item label="资源链接" prop="component">
          <el-input v-model="addOrEditForm.component" auto-complete="off" placeholder="请输入资源链接" />
        </el-form-item>
        <el-form-item label="权限标识" prop="permission">
          <el-input v-model="addOrEditForm.permission" auto-complete="off" placeholder="请输入权限标识" />
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input v-model="addOrEditForm.sort" auto-complete="off" placeholder="请输入排序" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog('addOrEditForm')">取消</el-button>
        <el-button size="small" type="primary" class="title" @click="submitForm('addOrEditForm')">保存</el-button>
      </div>
    </el-dialog>
  </el-card>
</template>

<script>
import { requestAllPage } from '@/api/user'
import {
  requestResourceAll,
  requestSaveResource,
  requestUpdateResource,
  requestDelResourceById
} from '@/api/resource'
import { successMessage } from '@/utils/message'
import svgIcons from '../../utils/svg-icons'

export default {
  data() {
    return {
      visible: false,
      svgIcons,
      listLoading: false,
      data: [],
      addOrEditFormVisible: false, // 新增或者删除弹出框默认值
      rules: {
        name: [
          { required: true, message: '资源名称不能为空', trigger: 'blur' }
        ],
        sort: [{ required: true, message: '排序不能为空', trigger: 'blur' }]
      },
      resources: {}, // 不是树形结构的所有资源
      addOrEditForm: {
        title: '',
        submitType: 0,
        id: '',
        name: '',
        parentId: '',
        type: 1,
        icon: '',
        path: '',
        redirect: '',
        activeMenu: '',
        component: '',
        permission: '',
        sort: ''
      }
    }
  },
  mounted() {
    this.requestUsersInfo()
    this.getResourceAll()
  },
  methods: {
    // 图标选中
    iconActiveHandle(iconName) {
      this.addOrEditForm.icon = iconName
      this.visible = false
    },
    add(row) {
      if (row) {
        this.addOrEditFormVisible = true
        this.addOrEditForm.title = '添加下级'
        this.addOrEditForm.submitType = 0
        this.addOrEditForm.parentId = row.id
      } else {
        this.addOrEditFormVisible = true
        this.addOrEditForm.title = '新增资源'
        this.addOrEditForm.parentId = 0
        this.addOrEditForm.submitType = 1
      }
    },
    deleteRow(row) {
      this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          requestDelResourceById(row.id).then(data => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.requestUsersInfo()
            this.getResourceAll()
          })
        })
        .catch(() => {
          this.$message({
            type: 'success',
            message: '已取消删除'
          })
        })
    },
    editRow(row) {
      this.addOrEditFormVisible = true
      this.addOrEditForm.title = '修改资源'
      this.addOrEditForm.submitType = 2
      this.addOrEditForm.name = row.name
      this.addOrEditForm.parentId = row.parentId
      this.addOrEditForm.id = row.id
      this.addOrEditForm.type = row.type
      this.addOrEditForm.path = row.path
      this.addOrEditForm.redirect = row.redirect
      this.addOrEditForm.activeMenu = row.activeMenu
      this.addOrEditForm.component = row.component
      this.addOrEditForm.permission = row.permission
      this.addOrEditForm.sort = row.sort
      this.addOrEditForm.icon = row.icon
    },
    requestUsersInfo() {
      requestAllPage().then(data => {
        this.data = data
      })
    },
    getResourceAll() {
      this.listLoading = true
      requestResourceAll().then(data => {
        this.resources = data
        this.listLoading = false
      })
    },
    closeDialog(Visible) {
      if (Visible === 'addOrEditForm') {
        this.addOrEditFormVisible = false
        this.$refs[Visible].resetFields()
      }
    },
    submitForm(Visible) {
      this.$refs[Visible].validate(validate => {
        if (
          validate &&
          Visible === 'addOrEditForm' &&
          this.addOrEditForm.submitType !== 2
        ) {
          // 编辑和新增
          requestSaveResource(this.addOrEditForm).then(data => {
            this.addOrEditFormVisible = false
            this.requestUsersInfo()
            this.getResourceAll()
            this.$refs[Visible].resetFields()
            successMessage('保存数据成功')
          })
        } else if (
          validate &&
          Visible === 'addOrEditForm' &&
          this.addOrEditForm.submitType === 2
        ) {
          // 修改
          requestUpdateResource(this.addOrEditForm).then(data => {
            this.addOrEditFormVisible = false
            this.requestUsersInfo()
            this.getResourceAll()
            this.$refs[Visible].resetFields()
            successMessage('保存数据成功')
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.menu-icon-list > {
  .el-button {
    margin-bottom: 3px;
    font-size: 16px;
    padding: 7px 10px 7px;
  }
  .is-one {
    margin-left: 0px;
  }
}
</style>
